<script setup>
import { updatepwdService } from '@/api/ResetkeyView'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import '@/assets/formstyle.css'
const loginForm = ref({
  password: '',
  repassword: '',
})

const setFromdata = () => {
  if (
    !loginForm.value.password.trim() ||
    !loginForm.value.repassword.trim() 
  ) {
    message.error('密码不能为空')
    return
  }
  if (loginForm.value.password.length < 6) {
    message.error('密码长度不少于6位')
    return
  }
  if (loginForm.value.password !== loginForm.value.repassword) {
    message.error('两次密码输入不一致')
    return
  }

  


  updatepwdService(loginForm.value)
    .then((res) => {
      console.log(res)
      if (res.status === 0) {
        message.success('重置密码成功！')
      } else {
        message.error('重置密码失败！')
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>
<template>
  <div class="about">
    <div class="yetou">
      <div class="loader">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>

      </div>
      <p>--- WELCOME TO 3G ---</p>
    </div>
    <div class="theform">
      <div class="form-content">
        <h1>重置密码</h1>
        <div>
          <p class="userInput">
            <span>密码： </span><input type="password" v-model="loginForm.password" />
          </p>
          <p class="userInput">
            <span>确认密码： </span><input type="password" v-model="loginForm.repassword" />
          </p>
        </div>
        <button @click="setFromdata">提交</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.about {
  width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* 将主轴方向设置为垂直 */
    justify-content: flex-start;
    /* 将元素顶部对齐 */
    align-items: center;
    background-color: #165047;
    .theform {
        display: flex;
        justify-content: center;
        /* 在水平方向上居中 */
        align-items: center;
        /* 在垂直方向上居中 */
        height: 100%;
        /* 充满父容器的高度 */
      }
            .yetou {
              display: flex;
              align-items: center;
      
              p {
                margin-right: 10px;
                font-weight: 500;
                color: #f9aa00;
              }
      
              .loader {
                width: 85px;
                height: 85px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                animation: loading-rotate 3s linear infinite;
              }
      
              .item {
                width: 40px;
                height: 40px;
                display: block;
                box-sizing: border-box;
              }
      
              .item:nth-of-type(1) {
                background-color: #3a696d;
                border-radius: 20px 20px 0 20px;
                border-left: #ffffffb3 4px solid;
                border-top: #f7f7f7c0 4px solid;
              }
      
              .item:nth-of-type(2) {
                background-color: #6ca769;
                border-radius: 20px 20px 20px 0;
                border-right: #ffffffaa 4px solid;
                border-top: #f7f7f7c3 4px solid;
              }
      
              .item:nth-of-type(3) {
                background-color: #b7e65e;
                border-radius: 20px 0 20px 20px;
                border-left: #ffffffac 4px solid;
                border-bottom: #f7f7f7be 4px solid;
              }
      
              .item:nth-of-type(4) {
                background-color: #89d092;
                border-radius: 0 20px 20px 20px;
                border-right: #ffffffb3 4px solid;
                border-bottom: #f7f7f7bf 4px solid;
              }
      
              @keyframes loading-rotate {
                0% {
                  transform: scale(.5) rotate(0);
                }
      
                20% {
                  transform: scale(.5) rotate(72deg);
                }
      
                40% {
                  transform: scale(.5) rotate(144deg);
                }
      
                60% {
                  transform: scale(.5) rotate(216deg);
                }
      
                80% {
                  transform: scale(.5) rotate(288deg);
                }
      
                100% {
                  transform: scale(.5) rotate(360deg);
                }
              }
            }

  .userInput {
    width: 85%;
    display: flex;

    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1rem;

    span {
      width: 32%;
      text-align: right;
    }

    input {
      width: 85%;
    }
  }
}

p span {
  color: rgb(233, 123, 12);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 600;
}

/* 当视口宽度小于 600px 时应用的样式 */
@media screen and (max-width: 600px) {
  .about .form-content .userInput {
    width: 98%;
    span {
      width: 44%;
    }
    input {
      width: 64%;
    }
  }
}

/* 当视口宽度大于等于 600px 且小于等于 1200px 时应用的样式 */
@media screen and (min-width: 601px) and (max-width: 1200px) {
}

/* 当视口宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1201px) {
}
</style>
